<template>
    <div class="components_detail_modal">
        <el-dialog width="1000px" title="店铺详情" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <div>
                <table style="width:100%">
                    <tbody>
                        <tr>
                            <td width="110px;">店铺名称：</td>
                            <td colspan="5">{{info.name}}</td>
                        </tr>
                        <tr>
                            <td width="110px;">店铺代码：</td>
                            <td>{{info.code}}</td>
                            <td width="110px;">联系方式：</td>
                            <td>{{info.linkman}}</td>

                            <td width="110px;">店铺地址：</td>
                            <td>{{info.address}}</td>

                        </tr>
                        <tr>
                            <td width="110px;">所属区域：</td>
                            <td>{{info.region}}</td>
                            <td width="110px;">直营店铺：</td>
                            <td>{{info.isRoot? '是':'否'}}</td>

                            <td width="110px;">所属省市区：</td>
                            <td>{{info.province}} - {{info.city}} - {{info.district}}</td>

                        </tr>
                        <tr>
                            <td width="110px;">店铺描述：</td>
                            <td colspan="5">{{info.description}}</td>
                        </tr>
                        <!-- <tr>
                            <td width="110px;">圈子名称: </td>
                            <td colspan="5">{{info.topicName}}</td>
                        </tr>
                        <tr>
                            <td width="110px;">店铺名称：</td>
                            <td colspan="75">{{info.albumName}}</td>
                        </tr> -->
                        <tr>
                            <td width="110px;">店铺相册：</td>
                            <td colspan="5">
                                <!-- {{info.albums}} -->
                                <div v-for="(item,index) in info.albums">
                                    <!-- <img :src='item.url' width="200px"/> -->
                                    <el-tag size="mini" type="success">{{index+1}}、{{item.title}}</el-tag>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini">确 定</el-button>
                <el-button @click="state = false" size="mini">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { enums } from '@/constant'
    import PlUpload from "../../../common/PlUpload"
    import moment from 'moment'
    export default {
        components: {
            "pl-upload": PlUpload
        },
        data() {
            return {
                state: false,
                title: '',
                type: '',
                imageUrl: '',
                attachment: [], //上传附件
                info: {
                    title: null,
                    description: null,
                    created: null,
                    albumName: null,
                    userName: null,
                    topicName: null,
                    likeSize: null,
                    photoComments: null,
                    remainDays: null,
                    like: null,
                    url: null
                },
                rules: {
                    type: [{
                        required: true,
                        message: '请输入字典类型',
                        trigger: 'blur'
                    }],
                    dictValue: [{
                        required: true,
                        message: '请输入字典名称',
                        trigger: 'blur'
                    }],
                    description: [
                        // { required: true, message: '请输入字典描述', trigger: 'blur'}
                    ],
                    dictKey: [{
                        required: true,
                        message: '请输入字典值',
                        trigger: 'blur'
                    }]
                },
            }
        },
        created() {
        },
        mounted() {},
        methods: {
            showDialog(val) {
                this.info = null;
                if (val) {
                    console.log("val");
                    console.log(val);
                    this.info = val;
                    this.info.created = moment(this.info.created).format('YYYY-MM-DD h:mm')
                    // for(var key in val){
                    //     console.log(val[key])
                    //     this.info[key] = val[key];
                    // }
                } 
                this.state = true;
            },
        },
    };
</script>
<style scoped>
    .photos_box{ width: 200px; height:300px; overflow: hidden; margin: 4px; background: #eee; position: relative; display: inline-block;}
    .photos_box img{ transform: translate(-50%,-50%); position: absolute; top: 50%; left: 50%;}
    .photos_box p{ height: 30px; line-height: 30px; font-size: 12px; color: #fff; background: rgba(0, 0, 0, 0.6); position: absolute; bottom: 0; width: 100%; padding: 0 10px;}
    /* .el-form--inline .el-form-item__content{ width: 220px; } */
</style>